<template>
    <div>
        <el-table :data="arr" border style="width: 100%;">
            <el-table-column prop="text" label="姓名" align="center" />
            <el-table-column prop="state" label="状态" align="center">
              <template #default="scope">
                 <span>{{scope.row.state}}</span>
                 <el-switch v-model="scope.row.state"/>
              </template> 
            </el-table-column>
        </el-table>
    </div>
</template>
<script  setup lang="ts">
import { ref,reactive,computed} from 'vue'
const tableList = reactive([
    { "cell1": { "text": "李四1", "state": true }, 
      "cell2": { "text": "李四4", "state": true }, 
      "cell3": { "text": "李四13", "state": true } 
    }, 
    { "cell": { "text": "李四1", "state": true },
     "cell2": { "text": "李四2", "state": true }, 
     "cell3": { "text": "李四13", "state": false } 
    }, 
    { "cell": { "text": "王五7", "state": true },
     "cell2": { "text": "李四2", "state": true }, 
     "cell3": { "text": "李四9", "state": false } 
    }
])

let arr = reactive([])
tableList.forEach(item=>{
     for (const i in item) {
          arr.push(item[i])
          // console.log(item[i])
     }
})
</script>